<html>

<head>
    <title>Highcharts 带标记曲线</title>
    <meta charset="utf-8">
    <style>
        .container {
            width: 550px;
            height: 400px;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div class="container"></div>
    <script src="../lib/jquery-3.5.1.min.js"></script>
    <script src="../lib/highcharts.js"></script>
    <script>
        $(function () {
            var chart = { type: 'spline' };
            var title = { text: '月平均气温' };
            var subtitle = { text: '来源教程' };
            var xAxis = {
                categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
            };
            var yAxis = {
                title: { text: '温度(\xB0C)' },
                labels: { formatter: function () { return this.value + '\xB0'; } },
                lineWidth: 2
            };
            var plotOptions = {
                spline: { marker: { radius: 4, lineColor: '#666666', lineWidth: 1 } }
            };
            // 提示
            var tooltip = { crosshairs: true, shard: true };
            // 图例
            var legend = { layout: 'vertical', align: 'right', verticalAlign: 'middle', borderWidth: 0 };
            // 数据
            var series = [
                {
                    name: 'Tokyo',
                    marker: {
                        symbol: 'square'
                    },
                    data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, {
                        y: 26.5,
                        marker: {
                            symbol: 'url(/highcharts/images/sun.png)'
                        }
                    }, 23.3, 18.3, 13.9, 9.6]
                }, {
                    name: 'London',
                    marker: {
                        symbol: 'diamond'
                    },
                    data: [{
                        y: 3.9,
                        marker: {
                            symbol: 'url(/highcharts/images/snow.png)'
                        }
                    }, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
                }
            ];
            var data = { chart: chart, title: title, subtitle: subtitle, xAxis: xAxis, yAxis: yAxis, 
            tooltip: tooltip, legend: legend, series: series, plotOptions: plotOptions };
            $(".container").highcharts(data);
        });
    </script>
</body>

</html>